<template>
  <u-image v-if="isImg" :width="`${imgWidth}rpx`" :height="`${imgWidth}rpx`" :src="icon"></u-image>
  <view
    v-else
    class="iconfont"
    :class="icon"
    :style="{ color: color, fontSize: fontSize }"
    @click="onClick"
  ></view>
</template>

<script>
  /**
   * iconfont 图标
   * @description 用于展示 iconfont 图标
   * @property {Number} size 图标大小
   * @property {String} color 图标颜色
   * @event {Function} click 点击 Icon 触发事件
   */
  export default {
    name: 'GIcon',
    props: {
      icon: {
        type: String,
        default: ''
      },

      color: {
        type: String,
        default: ''
      },
      fontSize: {
        type: String,
        default: ''
      },
      imgWidth: {
        type: Number,
        default: 50
      }
    },
    data() {
      return {}
    },
    computed: {
      isImg() {
        return this.isExternal(this.icon)
      }
    },
    watch: {
      icon(newValue, oldValue) {
        this.isImg = this.isExternal(this.icon)
        console.log(this.isImg)
      }
    },
    mounted() {},
    methods: {
      onClick(e) {
        this.$emit('click', e)
      },
      /* 检测是否网络图片 */
      isExternal(path) {
        return /^(https?:|mailto:|tel:)/.test(path)
      }
    }
  }
</script>

<style lang="scss" scoped>
  @import url('./iconfont.css');
  .iconfont {
    display: flex;
    justify-content: center;
    align-items: center;
  }
</style>
